<template>
  <div v-if="bandwidthStore.error" 
       class="fixed bottom-4 right-4 max-w-sm bg-red-50 border border-red-200 rounded-lg shadow-lg p-4 z-50">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <AlertCircle class="w-5 h-5 text-red-600" />
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-sm font-medium text-red-800">{{ t('components.error_notification.operation_failed') }}</h3>
        <p class="mt-1 text-sm text-red-700">{{ bandwidthStore.error }}</p>
      </div>
      <div class="ml-4 flex-shrink-0">
        <button @click="dismiss" class="text-red-400 hover:text-red-600">
          <X class="w-4 h-4" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AlertCircle, X } from 'lucide-vue-next'
import { useBandwidthStore } from '@/stores/bandwidth'
import { useI18n } from '@/composables/useI18n'

const bandwidthStore = useBandwidthStore()
const { t } = useI18n()

const dismiss = () => {
  bandwidthStore.error = null
}
</script> 